<template>
    <div class="users">
        <div class="search">
            <el-input placeholder="请输入内容" v-model="query" style="width: 300px;margin: 10px 0;" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            <el-button type="primary" style="margin: 10px 20px;" @click="openadd">添加用户</el-button>
        </div>
        <!-- 表格 -->
        <!-- <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="mobile" label="电话">
            </el-table-column>
            <el-table-column prop="role_name" label="角色">
            </el-table-column>
            <el-table-column prop="mg_state" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" @change="editstatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)" circle></el-button>
                    <el-button type="warning" icon="el-icon-setting" @click="privilegeshandel(scope.row)"
                        circle></el-button>
                </template>
            </el-table-column>
        </el-table> -->

        <!-- 表格组件 -->
        <my-table :clos="clos" :data="tableData" @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange" :current_page="pagenum" :page_sizes="[2, 4, 6, 8]"
            :page_size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            <template v-slot:mg_state="{ row }">
                <el-switch v-model="row.mg_state" @change="editstatus(row)">
                </el-switch>
            </template>
            <template v-slot:cz="{ row }">
                <el-button type="primary" icon="el-icon-edit" @click="handleEdit(row)" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDelete(row.id)" circle></el-button>
                <el-button type="warning" icon="el-icon-setting" @click="privilegeshandel(row)" circle></el-button>
            </template>
        </my-table>

        <!-- 分页 -->
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
            :page-sizes="[2, 4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination> -->
        <!-- 对话框 -->
        <el-dialog :title="editid ? '修改' : '添加'" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" :disabled="editid ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" v-if="editid ? false : true">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="ruleForm.mobile"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="okuserslist">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分配权限对话框 -->
        <el-dialog title="分配权限" :visible.sync="dialogFormVisible1">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="当前性名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="当前角色">
                    <el-input v-model="form.role_name"></el-input>
                </el-form-item>
                <el-form-item label="分配权限">
                    <el-select v-model="form.role_name" placeholder="请选择权限">
                        <el-option :label="item.role_name" :value="item.role_name" v-for="item in relouserlist"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getusersAPI, delusersAPI, addusersAPI, editusersAPI, editstatusAPI, privilegesusers, rolelist } from '@/utlis/api/users/usersapi';
import MyTable from '../../components/table/table.vue'
export default {
    components: { MyTable },
    data() {
        return {
            clos: [
                { label: '#', type: 'index' },
                { label: '姓名', name: 'username' },
                { label: '邮箱', name: 'email' },
                { label: '电话', name: 'mobile' },
                { label: '角色', name: 'role_name' },
                { label: '状态', slot: 'mg_state' },
                { label: '操作', slot: 'cz' },
            ],
            tableData: [],
            query: '',
            pagenum: 1,
            pagesize: 2,
            total: 0,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            ruleForm: {
                username: '',
                password: '',
                email: '',
                mobile: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            },
            editid: '',
            options: [],
            pid: '',
            relouserlist: [],
            form: {
                username: '',
                role_name: '',
                role_name: ''
            }
        }
    },
    methods: {
        getusersList() {
            getusersAPI({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize }).then((res) => {
                console.log(res);
                this.tableData = res.data.data.users
                this.total = res.data.data.total
            })
        },
        // 修改
        handleEdit(row) {
            this.editid = row.id
            this.ruleForm = row
            this.dialogFormVisible = true
        },
        // 删除
        handleDelete(id) {
            delusersAPI(id).then((res) => {
                console.log(res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getusersList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })
        },
        // 每页条数
        handleSizeChange(val) {
            this.pagesize = val
            this.getusersList()
        },
        // 第几页
        handleCurrentChange(val) {
            this.pagenum = val
            this.getusersList()
        },
        // 搜索
        search() {
            this.getusersList()
        },
        // 点击添加打开对话框
        openadd() {
            this.dialogFormVisible = true
            this.ruleForm = {}
            this.editid = ''
        },
        // 对话框确认
        okuserslist() {
            if (this.editid) {
                editusersAPI(this.ruleForm).then(res => {
                    console.log(res);
                    this.getusersList()
                    this.dialogFormVisible = false
                })
            } else {
                addusersAPI(this.ruleForm).then((res) => {
                    console.log(res);
                    this.getusersList()
                    this.dialogFormVisible = false
                })
            }
        },
        // 修改用户状态
        editstatus(row) {
            editstatusAPI(row).then(res => {
                this.getusersList()
            })
        },
        // 分配权限
        privilegeshandel(row) {
            this.dialogFormVisible1 = true
            this.pid = row.id
            this.form = row
        },
        onSubmit() {
            privilegesusers({ id: this.pid, from: this.form }).then(res => {
                console.log(res);
                console.log(this.form);
                this.dialogFormVisible1 = false
                this.getusersList()
            })
        }
    },
    created() {
        this.getusersList()

        rolelist().then(res => {
            console.log(res);
            this.relouserlist = res.data.data
        })
    }
}
</script>
<style lang="scss" scoped></style>